<template>
  <div class="page-content">
    <div class="h2">商家管理</div>
    <div class="padding bg-white mb flex-row">
      <div class="flex1">
        <a-form layout="inline" :model="searchState" @finish="toSearch">
          <a-form-item name="keyword">
            <a-input v-model:value="searchState.keyword" placeholder="名称|地址" />
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button type="primary" html-type="submit">搜索</a-button>
              <a-button @click="reset" v-if="search">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </div>
      <a-space>
        <a-button type="primary" @click="toAdd">新增</a-button>
        <a-button @click="refresh">刷新</a-button>
      </a-space>
    </div>
    <StoreTable :filter="searchFilter" ref="tableRef">
      <template #action="{ record }">
        <a-space>
          <a @click="handleEdit(record)">编辑</a>
          <a @click="handleRemove(record)" class="text-red">删除</a>
        </a-space>
      </template>
    </StoreTable>
  </div>

  <StoreDrawer v-if="modal == 'drawer'" :item="crtItem" @close="onCancel" @saved="onSaved" />
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { removeStore } from '@/api/store'
import StoreDrawer from '@/components/StoreDrawer.vue';
import StoreTable from '@/components/StoreTable.vue';
import { confirm } from '@/mixin'

const tableRef = ref()
const modal = ref(null)
const crtItem = ref(null)
const search = ref(false)
const searchState = reactive({})
const searchFilter = ref({})


onMounted(() => {

})
const reset = () => {
  searchState.keyword = null
  search.value = false
  searchFilter.value = {}
}
const toSearch = () => {
  search.value = true;
  searchFilter.value = { ...searchState }
}


const toAdd = () => {
  crtItem.value = null
  modal.value = 'drawer'
}
const refresh = () => {
  tableRef.value.refresh()
}
const onCancel = () => {
  modal.value = null
}

const handleEdit = item => {
  crtItem.value = item
  modal.value = 'drawer'
}
// 删除
const handleRemove = item => {
  confirm(`您确定要删除【${item.name}】吗？`, async () => {
    const res = await removeStore(item.id)
    if (res.data) {
      message.success('删除成功')
      load(pagination.current)
    }
  })
}
const onSaved = () => {
  onCancel()
  if (crtItem.value) {
    refresh()
  } else {
    load(1)
  }
}
</script>

<style lang="less" scoped></style>